/*
 * @Author: 小胖沱 1643200914@qq.com
 * @Date: 2022-12-19 15:45:02
 * @LastEditors: 小胖沱 1643200914@qq.com
 * @LastEditTime: 2022-12-29 13:45:34
 * @FilePath: \jk_sort_front\src\pages\QueryReport\ProductionBroad\components\FinishChart.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { cloneDeep } from 'lodash'
import { useEffect, useState } from 'react'

import styles from './finishChart.module.less'

const initData = [
  { processesType: 10, completedAmount: 0, title: '上架' },
  { processesType: 20, completedAmount: 0, title: '大烫' },
  { processesType: 30, completedAmount: 0, title: '复查' },
  { processesType: 40, completedAmount: 0, title: '包装' }
]

export default (props) => {
  const { data = [] } = props
  const [currentData, setCurrentData] = useState<any[]>([...initData])

  const getPositionNumber = (num) => {
    const bit = parseInt(`${num % 10}`)
    const ten = parseInt(`${(num % 100) / 10}`) //十位
    const best = parseInt(`${(num % 1000) / 100}`) //百位
    const thousand = parseInt(`${(num % 10000) / 1000}`) //千位
    const wan = parseInt(`${(num % 100000) / 10000}`) //千位
    return (
      <>
        <span style={{ color: wan > 0 ? '#04e4f9' : '#072C88' }}>{wan}</span>
        <span
          style={{ color: thousand <= 0 && wan <= 0 ? '#072C88' : '#04e4f9' }}
        >
          {thousand}
        </span>
        <span
          style={{
            color:
              thousand <= 0 && wan <= 0 && best <= 0 ? '#072C88' : '#04e4f9'
          }}
        >
          {best}
        </span>
        <span
          style={{
            color:
              thousand <= 0 && wan <= 0 && best <= 0 && ten <= 0
                ? '#072C88'
                : '#04e4f9'
          }}
        >
          {ten}
        </span>
        <span
          style={{
            color: '#04e4f9'
          }}
        >
          {bit}
        </span>
      </>
    )
  }

  useEffect(() => {
    if (data && data.length) {
      const newData = cloneDeep(currentData)
      newData.map((i) => {
        const current =
          data.find((d) => d.processesType === i.processesType) || {}
        i.completedAmount = current.completedAmount || 0
      })
      setCurrentData([...newData])
    }
  }, [data])

  return (
    <div className={styles.container}>
      {currentData.map((d) => (
        <div key={d.processesType} className={styles.numberBox}>
          <div className={styles.finishTitle}>{d.title}完成数量</div>
          {getPositionNumber(d.completedAmount)}
        </div>
      ))}
    </div>
  )
}
